<template>
	<view class="container">
		<view class="head">
			<uni-icons type="redo" size="17px" style="color: #FCFCFC; float: right;margin-right: 12px;"></uni-icons>
			<uni-nav-bar dark :fixed="true" shadow background-color="#1F8AF3" color="#FCFCFC" status-bar left-icon="left" right-icon="redo" title="商品详情" @clickLeft="back" />
		</view>
		<view class="body">
			<view class="text-head">
				<h3>基于SpringBoot+Vue的商城系统附带小程序源码</h3>
				<text class="text-read">3.9分 62人阅读</text>
			</view>
			<view class="message">
				<iframe name="ifd" 
					src="/static/xinxi_00.png" 
					frameborder="0" 
					scrolling="no" 
					width="100%" 
					height="993px" 
					onload="this.height=ifd.document.body.scrollHeight" 
					class="iframePDF"
				></iframe>
				<!-- {{content}} -->
			</view>
		</view>
		<view>
			<uni-fab
				:pattern="pattern" @fabClick="fabClick"></uni-fab>
		</view>
		<view class="shop-tj">
			<text style="color: rgba(16, 16, 16, 1);
				font-size: 14px;
				text-align: left;"
				>推荐
			</text>
			<hr class="line">
			<view class="goods"
				v-for="(item,index) in dataList"
				:key="index"
			>
				<image :src="item.imgUrl" mode="aspectFit"></image>
				<view class="content">
					<text>{{item.name}}</text>
					<view class="content-message">
						<text class="price">￥{{item.price}}</text>
						<text class="ttime">{{item.ttime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-foot">
			<view class="fav">
				<uni-icons type="heart" size="23px" color="#888889" @click="fav"></uni-icons>
				<text class="fav-txt" @click="fav">收藏</text>
			</view>
			<button class="shop-btn" @click="buttonClick">立即购买</button>
		</view>
	</view>
</template>

<script>
	import axios from 'axios'
	export default{
		onLoad(e) {
			// console.log("e.id:"+e.id);
			this.id=e.id
		},
		data(){
			return {
				id:'',
				// collectionList:[],
				// getListData:[],
				content:'',
				pattern: {            //悬浮球
					color: '#FDFEFE', 
					backgroundColor: '#7ECDAD',
					selectedColor: '#7ECDAD',
					buttonColor: '#44B65F',
					icon: 'home-filled'
				},
				dataList:[
					{
						imgUrl:"/static/pdf.png",
						name:"单反相机/套机   佳能（Canon）1500D  18-55II镜头 黑色",
						price:"25",
						ttime:"2019-12-25",
					},	
					{
						imgUrl:"/static/pdf.png",
						name:"哈尔滨理工大学809-计算机网络专业课真题",
						price:"25",
						ttime:"2019-12-25",
					}
				],
			}
		},
		// mounted() {
		// 	uni.request({
		// 		url:'/static/text.txt',
		// 		success: (res) => {
		// 			this.content = res.data
		// 		}
		// 	})
		// },
		methods:{
			back(){
				uni.switchTab ({
					url:'/pages/index/index',
				})
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'success'
				})
				
			},
			buttonClick(e) {
				// console.log(e)
				uni.navigateTo({
					url:'/pages/index/order',
				})
			},
			fabClick(){
				uni.showToast({
					title:'点击了悬浮按钮,即将跳转回首页',
					icon:'none'
				})
				setTimeout(function(){
					uni.switchTab({
						url:'/pages/index/index',
					})
				},1000)
			},
			fav(){
				this.postData()
				uni.showToast({
					title:'已收藏',
					icon:'none'
				})
				setTimeout(function(){
					uni.navigateTo({
						url:'/pages/index/favorite',
					})
				},1000)
				
			},
			//获取接口数据
			postData(){
				this.$axios.post("/collection/collect",{
					goodsId: 1 
				}).then(res=>{
					console.log(res,"收藏");
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:"none"
					})
				})
			},
			// getData(){
			// 	axios.get("/api/goods/search",{
			// 		params:{
			// 			key:408,
			// 		},
			// 		headers:{
			// 			'token':"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI0IiwiZXhwIjoxNjg5OTkzNzg1LCJpYXQiOjE2ODkzODg5ODV9.v4rrFfLG9wVOOlK-1-6SZpG1yn9Ks4j-UWpERyJkyGo"
			// 		}
			// 	}).then(res=>{
			// 			let key = this.id
			// 			console.log("key:"+key);
			// 			for (var i = 0;i<res.data.data.length;i++) {
			// 				if(res.data.data[i].id == key){
			// 					this.getListData.push(res.data.data[i]);
			// 				}
			// 			}
			// 			console.log(JSON.stringify(this.getListData) );
			// 		}).catch(()=>{
							
			// 			uni.showToast({
			// 				title:"请求失败",
			// 				icon:"none"
			// 			})
			// 		})
			// },
		}
		
	}
</script>

<style>
	.body{
		padding: 0 10px 0 10px;
		/* height: 293px; */
		position: absolute;
	}
	
	.text-head{
		text-align: center;
	}
		
	.text-read{
		text-align: center;
		color: #CDCDCD;
		font-size: 10px;
	}
	.iframePDF {
	    position: absolute;
	    transform: scale(.5, .5) translate(-50%, -50%);
	    width: 200%;
	}
	/*商品推荐*/
	.shop-tj{
		margin-top: 15px;
		padding: 0 22px 0 20px;
		height: 326px;
		position: relative;
		overflow: auto;
		top: 1190px;
	}
	.goods{
		display: flex;
		width: 100%;
		height: 120px;
		background: #fff;
		margin: 7px 0;
	}
	uni-image{
		width: 130px;
		height: 85px;
	}
	text{
		font-size: 14px;
		color: #101010;
		
	}
	.content{
		margin-top: 10px;
		margin-right: 46px;
		
	}
	.content-message{
		margin-top: 43px;
	}
	.ttime{
		color: #888889;
		font-size: 12px;
		margin-top: 20px;
		margin-left: 51px;
		
	}
	.price{
		color: #ff0000;
		font-size: 16px;
		font-weight: 700;
	}
	/*底部导航栏*/
	.goods-foot{
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
	}
	.shop-btn{
		float: left;
		left: 33%;
		top: 1px;
		width: 89px;
		height: 36px;
		border-radius: 4px;
		background-color: rgba(237, 80, 33, 1);
		color: rgba(252, 252, 252, 1);
		font-size: 14px;
		text-align: center;
		
	}
	/*收藏小红心*/
	.fav{
		display: flex;
		flex-direction: column;
		position: relative;
		left: 63%;
	}
	.fav-txt{
		color: #888889;
		font-size: 12px;
		text-align: left;
	}
</style>